
<template>
    <div class="pro-header-box flexrb forbid p-row40 full-screen">
        <div class="left flexrcc">
            <span class="text">铁山港疫情治理平台</span>
        </div>
        <div class="right flex jbetween align-c">
            <div class="date">
                <div class="time">
                    {{ parseTime(nowTime, " {h}:{i}:{s} ") }}
                </div>
                <div class="day">
                    {{ parseTime(nowTime, " {y}-{m}-{d} ") }} &nbsp;&nbsp;周{{
                        parseTime(nowTime, " {a} ")
                    }}
                </div>
            </div>
            <div class="weather">
                <div class="temperature">{{ temperature }} ℃</div>
                <div class="weather-item">{{ weather }}</div>
            </div>
        </div>

    </div>
</template>

<script>
import { getWeather } from "@/api/proview";
export default {
    name: "ProHeader2",
    props: {
        num: {
            type: [String, Number],
            default: 1737,
        },
        status: {
            type: [String, Number],
            default: "安全",
        },
    },
    data() {
        return {
            nowTime: new Date(),
            weather: "多云",
            temperature: 28,
            title: "环保管理平台测试数据",
            currentIndex: 0,
            nowDate: "",
            nowWeek: "",
        };
    },
    created() {
        // getWeather().then((res) => {
        //     if (res.code == 0) {
        //         this.weather = res.data.lives[0].weather;
        //         this.temperature = res.data.lives[0].temperature;
        //     }
        // });
    },
    computed: {
        getColor() {
            return (c) => {
                if (c == "安全") return "success";
                else if (c == "警告") return "warning";
                else if (c == "危险") return "error";
                else {
                    return "default";
                }
            };
        },
    },
    mounted() {
        clearInterval(this.timer);
        this.timer = setInterval(() => {
            this.nowTime = new Date();
        }, 1000);
    },
    methods: {},
};
</script>

<style lang="scss" scoped>
.pro-header-box {
    color: #2ef7fc;
    font-size: vh(14);
    .left {
        height: vh(68);
        .text {
            font-family: "Microsoft YaHei UI";
            font-weight: 700;
            font-size: vw(30);
            letter-spacing: 0.08em;
            text-shadow: 0px 0px 20px #24a8e1;
            background: linear-gradient(180deg, #fff 40%, #89bed6 60%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
        }
    }
    .right {
        height: vh(56);
        .date {
            padding-right: vw(16);
            margin-right: vw(20);
            border-right: vw(2) solid rgba(255, 255, 255, 0.68);
            .time {
                font-family: "DIN";
                font-weight: 700;
                font-size: vh(20);
                background: linear-gradient(180deg, #ffffff 0%, #2ef7fc 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                text-fill-color: transparent;
            }
            .day {
                font-size: vh(14);
                font-family: "Microsoft YaHei UI";
                color: rgba(255, 255, 255, 0.68);
            }
        }
        .weather {
            .temperature {
                font-family: "DIN";
                font-weight: 700;
                font-size: vh(20);
                color: #ffffff;
            }
            .weather-item {
                font-family: "Microsoft YaHei UI";
                font-size: vh(14);
                color: rgba(255, 255, 255, 0.68);
            }
        }
    }


}
</style>
